<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<!--先写案例再解释事件流 写完案例后问同学点击东华理工会有什么反应 理论上是只谈东华理工 但实际上都弹出来了 这就叫事件流 在我们开发中很少去写 一般都是去解决问题-->
		<!--事件流：位置重叠出现的事件流 触发顺序是由最明确的事件源到最不明确的事件源依次触发-->
		<!--事件流举例：村里发生偷蒙拐骗案件 上报村里 村里不管上报县里 县里不管上报市里 市里不管上报中央。。。-->
		<!--冒泡型事件流：由明确的事件源到最不确定的事件源依次向上触发，离鼠标越近就表示越明确-->
		<!--捕获型事件不用管 IE不支持没啥用-->
		<style type="text/css">
			#nanchang{
				width: 500px;
				height: 500px;
				border: 3px solid red;
				margin: 5px;
			}
			#gaoxin{
				width: 350px;
				height: 350px;
				border: 3px solid blue;
				margin: 5px;
			}
			#ziyang{
				width: 200px;
				height: 200px;
				border: 3px solid yellow;
				margin: 5px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				document.getElementById("nanchang").onclick = function(){
					alert('南昌');
				}
				document.getElementById("gaoxin").onclick = function(e){
					alert('高新');
					//1.阻止事件流首先获得事件对象
					var ev = window.event || e;
					//2.判断一下浏览器
					if(document.all){
						ev.cancelBubble=true;
					}else{
						ev.stopPropagation();
					}
				}
				document.getElementById("ziyang").onclick = function(){
					alert('紫阳');
				}
			}
		</script>
	</head>
	<body>
		<div id="nanchang">
			南昌
			<div id="gaoxin">
				高新
				<div id="ziyang">
					紫阳
				</div>
			</div>
		</div>
	</body>
</html>
